<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
    <link rel="stylesheet" href="../css/index.css" >
</head>
<body>
<!--头部的盒子-->
    <header>
        <h1>供应链智慧中枢-采购指标(ECharts)</h1>
        <div class="showTime">123</div>
<!--        时间显示功能脚本-->
        <script>
            // 定义定时器变量
            var t = null;

            // 启动定时器：1秒后执行time函数
            t = setTimeout(time, 1000); // 开始运行时间显示功能

            // 时间显示主函数
            function time() {
                clearTimeout(t); // 清除之前的定时器，避免重复堆积

                // 创建日期对象，获取当前时间
                dt = new Date();

                // 获取时间各部分
                var y = dt.getFullYear();        // 获取完整年份（4位数）
                var mt = dt.getMonth() + 1;      // 获取月份（0-11，需要+1得到实际月份）
                var day = dt.getDate();          // 获取日期（1-31）
                var h = dt.getHours();           // 获取小时（0-23）
                var m = dt.getMinutes();         // 获取分钟（0-59）
                var s = dt.getSeconds();         // 获取秒钟（0-59）

                // 将时间显示在页面上，格式：当前时间：2020年3月17日-0时54分14秒
                document.querySelector(".showTime").innerHTML =
                    '当前时间：' + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";

                // 重新设置定时器，实现每秒更新
                t = setTimeout(time, 1000); // 设定定时器，循环运行时间更新
            }
        </script>

    </header>



<!--    页面主体部分-->
     <section class="mainbox">
        <div class="column">
            <div class="panel bar">
                <h2>近三年采购情况统计</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel line">
                <h2>近6个月各行业库存金额</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel pie">
                <h2>2025年各行业采购计划金额</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
<!--            no模块制作-->
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>169,593项</li>
                        <li>1,272.01亿元</li>
                        <li>1550.71亿元</li>
                        <li>15.48%</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>采购项目数</li>
                        <li>采购金额</li>
                        <li>概算金额</li>
                        <li>节资率</li>
                    </ul>
                </div>
            </div>
<!--            地图模块-->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">库存分布分类情况</div>
            </div>
        </div>
        <div class="column">
            <div class="panel bar2">
                <h2>2025年各分公司公开招标采购金额</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel line2">
                <h2>近12个月集中采购金额</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel pie2">
                <h2>2025年各行业采购计划项目数</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
     </section>
    <script src='../js/flexible.js'></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/china.js"></script>

</body>
</html>